<template>
    <div class="actuallyMonitor">
        <div class="title">
            <img :src="activeSrc" alt="" @click="changeIcon()">
        </div>
        <div class="main">
            <div class="box1">
                <component :is="comLeft" :pageType="pageType"></component>
            </div>
            <div class="box2">
                <tabs :pageType="pageType"/>              
            </div>
            <div class="box3">
                <ul>
                    <li style="overflow:hidden;position:relative;">
                        <img @click="changeErea" style="position:absolute;width:90%;height:90%;margin:10% 0 0 5%;cursor: pointer;" :src="ereaMapSrc" alt="">
                    </li>
                    <li>
                        <line-rain v-if="weaType=='rain'" :pageType="pageType"/>
                        <line-tem v-if="weaType=='tem'" :pageType="pageType"/>
                        <line-wind v-if="weaType=='wind'" :pageType="pageType"/>
                    </li>
                </ul>
            </div>
            <div class="box4">
                <ul>
                    <li>
                        <radar :comFlag="weaType"/>
                    </li>
                    <li>
                        <contrast :pageType="pageType"/>
                    </li>
                    <li>
                        <temrain-bar v-if="weaType=='rain'||weaType=='tem'" :pageType="pageType"/>
                        <wind-bar v-if="weaType=='wind'" :pageType="pageType"/>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
import rainCity from './leftCom/rainCity'
import rainCounty from './leftCom/rainCounty'
import temCity from './leftCom/temCity'
import temCounty from './leftCom/temCounty'
import windCity from './leftCom/windCity'
import windCounty from './leftCom/windCounty'//左侧
import tabs from './components/tabs'//tab切换
import lineRain from './centerCom/lineRain'//雨量曲线图
import lineTem from './centerCom/lineTem'
import lineWind from './centerCom/lineWind'
import contrast from './rightCom/contrast'//极值对比
import temrainBar from './rightCom/temrainBar'
import windBar from './rightCom/windBar'

import radar from './components/radar'//雷达拼图卫星云图
export default {
    components:{
        rainCity,
        rainCounty,
        temCity,
        temCounty,
        windCity,
        windCounty,
        // ~~~~~~~~~~~~
        tabs,
        // ~~~~~~~~~~~~
        lineRain,
        lineTem,
        lineWind,
        // ~~~~~~~~~~~~
        contrast,//极值对比
        temrainBar,
        windBar,

        radar,
    },
    data(){
        return{
            comLeft:'',//左侧组件切换
            erea:'-city',//当前地图区域
            weaType:'',//当前天气类型
            pageType:'',//温度,降水,风速切换或区域切换
            activeSrc:'',//温度,降水,风速图标   
            iconIndex:0,//温度,降水,风速索引   
            ereaMapSrc:require('../../../static/images/actuallyMonitor/city.png'),
            iconArr:[
                {name:'tem',src:require('../../../static/images/actuallyMonitor/temIcon.png')},
                {name:'rain',src:require('../../../static/images/actuallyMonitor/rainIcon.png')},
                {name:'wind',src:require('../../../static/images/actuallyMonitor/windIcon.png')},
            ]
        }
    },
    watch:{
        weaType(newval){
            this.pageType = this.weaType+this.erea
        },
        erea(newval){
            this.pageType = this.weaType+this.erea
        },
        pageType(newval){
            this.comLeft = newval
            if(newval=='tem-city'){
                this.ereaMapSrc = require('../../../static/images/actuallyMonitor/city.png');
            }else if(newval=='tem-county'){
                this.ereaMapSrc = require('../../../static/images/actuallyMonitor/county.png');
            }else if(newval=='rain-city'){
                this.ereaMapSrc = require('../../../static/images/actuallyMonitor/cityRain.png');
            }else if(newval=='rain-county'){
                this.ereaMapSrc = require('../../../static/images/actuallyMonitor/countyRain.png');
            }else if(newval=='wind-county'){
                this.ereaMapSrc = require('../../../static/images/actuallyMonitor/countyRain.png');
            }else if(newval=='wind-city'){
                this.ereaMapSrc = require('../../../static/images/actuallyMonitor/cityRain.png');
            }
        },
    },
    methods:{
        init(){
            this.weaType = 'tem'
        },
        changeIcon(){
            this.iconIndex++
            this.iconIndex = this.iconIndex==3?0:this.iconIndex
            this.activeSrc = this.iconArr[this.iconIndex].src
            this.weaType = this.iconArr[this.iconIndex].name
        },
         changeErea(){
            if(this.erea=='-city'){
                this.erea ='-county';
            }else if(this.erea=='-county'){
                this.erea = '-city'
            }
        }
    },
    created(){
            this.init()
            this.ereaMapSrc = require('../../../static/images/actuallyMonitor/city.png');
            this.activeSrc = this.iconArr[0].src
    },
    mounted(){     
    }
}
</script>

<style lang="scss" scoped>
    .actuallyMonitor{
        width:100%;
        height:67.5rem;
        padding:1rem;
        display:flex;
        flex-direction: column;
        box-sizing: border-box;
        color:#61DEFA;
        background-image: url('../../../static/images/actuallyMonitor/bg.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
        .title{
            width:100%;
            height:3rem;
            img{
                width:1.5rem;
                height:3.1rem;
                cursor: pointer;
                position:absolute;
                left:57%;
            }
        }
        .main{
            flex:1;
            display:flex;
        }
        .box1{
            flex:1;
            margin-right:1rem;
        }
        .box2{
            flex:.5;
        }
        .box3{
            flex:2;
            margin:0 1rem;
            ul{
                width:100%;
                height:100%;
                display: flex;
                flex-direction: column;
                li{
                    &:nth-child(1){
                        flex:2;   
                    }
                    &:nth-child(2){
                        flex:.7;
                    }
                }
            }
        }
        .box4{
            flex:1.5;
            ul{
                width:100%;
                height:100%;
                display:flex;
                flex-direction: column;
                li{
                    margin-bottom: 1rem;
                    &:nth-child(1){
                        flex:2;
                        background-image: url('../../../static/images/actuallyMonitor/radar.png');
                        background-size: 100% 100%;
                        background-repeat: no-repeat;
                    }
                    &:nth-child(2){
                        flex:1.1;
                        background-image: url('../../../static/images/actuallyMonitor/bar.png');
                        background-size: 100% 100%;
                        background-repeat: no-repeat;
                    }
                    &:nth-child(3){
                        flex:1.3;
                        margin-bottom: 0;
                        background-image: url('../../../static/images/actuallyMonitor/bar.png');
                        background-size: 100% 100%;
                        background-repeat: no-repeat;
                    }
                }
            }
        }
    }
</style>